<template>
  <div class="my-account" v-if="!getIsPhone">
    <account-header></account-header>
    <div class="wrapper">
      <div class="main box-shadow">
        <account-tab 
          :activeIndex="activeIndex"
          :tabs="tabs"
          @click="updateActiveIndex"
        ></account-tab>
        <router-view></router-view>
      </div>
    </div>
  </div>
  <div class="my-account" v-else>
    <router-view></router-view>
  </div>
</template>
<script>

import AccountHeader from '@/components/header/account-header/account-header'
import AccountTab from './components/account-tab'
import MyWallet from './components/my-wallet'
import MySettings from './components/my-settings'
import MyMsg from './components/my-msg'
import { mapGetters } from 'vuex';
export default {
  components: {
    AccountHeader,
    AccountTab,
    MyWallet,
    MySettings,
    MyMsg
  },
  data() {
    return {
      activeIndex: 0,
      tabs: [
        {
          id: 1,
          name: '我的钱包',
          path: '/my-account/wallet'
        },
        {
          id: 2,
          name: '安全设置',
          path: '/my-account/setting'
        },
        {
          id: 3,
          name: '消息',
          path: '/my-account/msg'
        },
        {
          id: 4,
          name: '操作日志',
          path: '/my-account/oplog'
        }
      ]
    }
  },
  methods: {
    updateActiveIndex(index) {
      this.activeIndex = index
      this.$router.push({path: this.tabs[index].path})
    }
  },
  computed: {
    ...mapGetters('lottery', ['getIsPhone']),
    
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .wrapper 
    box-sizing border-box 
    padding-top 128px
    .main   
      box-sizing border-box 
      width 1200px 
      margin 0 auto
      margin-top 10px
      background #fff
      
    



</style>
